<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<title>Exam</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css"/>
<script type="text/javascript">
	function preventBack(){
		window.history.forward();
	}
	
	setTimeout("preventBack()", 0);
	window.onunload=function(){null};

	function flyToPage(task) {
		if(task == "endExam") {
			var confirmation = confirm("Are you sure you want to end your exam?");
			if(confirmation == true) {
				document.forms[0].task.value = task;
				//alert("Exam selesai");
				document.forms[0].submit();
				
			}
		} else if(task == "doExam") {
			document.forms[0].doExam.value = true;
			document.forms[0].task.value = task;
			//alert(document.forms[0].task.value);
	    	document.forms[0].submit();
		} else {
			document.forms[0].task.value = task;
			//alert(document.forms[0].task.value);
	    	document.forms[0].submit();
		}
			
	}
	
	function flyToQuestion(key) {
		document.forms[0].task.value = "goto";
		var currentPage = parseInt(document.forms[0].elements["currentQuestion"].value);
		var currentPage2 = currentPage;
		
		if(key == "") {
			var hal = parseInt(document.getElementById("noOfQuestion").value);
			if(hal>=1 && hal<= document.forms[0].elements["totalQuestion"].value)
			{
				//document.forms[0].task.value = "goto";
				currentPage2 = hal;
				
				document.forms[0].elements["currentQuestion"].value = currentPage2;
				
				document.forms[0].submit();
			} 
			else 
			{
				document.forms[0].task.value = "";
				document.getElementById("noOfQuestion").value = "";
				alert("No of question is not valid!");
			}
		} else if(currentPage2 == 1 && key == "prev") {
			alert("You already in first question");
		} else if(currentPage2 == document.forms[0].elements["totalQuestion"].value && key == "next") {
			alert("You already in last question");
		} else {
			if(key == "first") {
				currentPage2 = 1;
			} else if(key == "prev") {
				currentPage2 = (currentPage - 1);
			} else if(key == "next") {
				currentPage2 = (currentPage + 1);
			} else if(key == "last") {
				currentPage2 = document.forms[0].elements["totalQuestion"].value;
			} else if(key == "go" && document.forms[0].elements["noOfUnaswerQuestion"].value != '') {
				currentPage2 = document.forms[0].elements["noOfUnaswerQuestion"].value;
			}
			
			document.forms[0].elements["currentQuestion"].value = currentPage2;
			
			document.forms[0].submit();
		}		
	}
	
	function countDownForTrainee() {
		//alert("Trainee mau ujian coy!");
		var startHour = "";
		
		// variables for time units
		var days, hours, minutes, seconds;
		var countdown;
		var tamp = "";
		
		//var coba;
		
		var current_date, target_date, seconds_left;
		
		if(document.forms[0].task.value == "exam") {
			startHour = document.forms[0].elements["listUjian.startHour"].value;
			countdown = document.getElementById("countdownStart");
		} else {
			startHour = document.forms[0].elements["listUjian.endHour"].value;
			countdown = document.getElementById("countdownEnd");
		}
		
		//coba = document.getElementById("coba");
		
		//alert(startHour);
		target_date = new Date(startHour).getTime();
	 
		var current_date1 = new Date().getTime();
	    var seconds_left1 = (target_date - current_date1) / 1000;
	    seconds_left1 = Math.round(seconds_left1);
	    //seconds_left1 -= 9290;
	    //alert(seconds_left1);
	    
// 	    if(seconds_left < 0 && document.forms[0].task.value != "exam") {
// 				coba.innerHTML = "Your exam has finished";
// 		}
//			else {
//				coba.innerHTML = "ERROR!!!<br/>Please ask admin!";
//			}
	    
	    if (seconds_left1 <= 0 && document.forms[0].task.value == "exam"){
	    	tamp = " in progress";
	    	countdown.innerHTML = tamp;
	    	document.getElementById("startExam").disabled = false;
	    	//alert(document.forms[0].doExam.value);
	    	if (document.forms[0].doExam.value) {
	    		//alert("true11111");
	    		document.getElementById("startExam").value = "Continue Exam";
			}
	    } else if(seconds_left1 > 0 ) {
	    	
	    	setInterval(function () {
	   		 	tamp = "";
	    		
			    // find the amount of "seconds" between now and target
			    current_date = new Date().getTime();
			    seconds_left = (target_date - current_date) / 1000;
			    seconds_left = Math.round(seconds_left);
			    
//				    if(document.forms[0].task.value == "exam") {
//				    	tamp = "will start in ";
//				    } 
			    
			    //seconds_left -= 9290;
			    
			    //alert(seconds_left);
			    
			    // -- posisi masih countdown,, nunggu uian mulai
			    if(seconds_left < 1 && document.forms[0].task.value == "exam") {
			    	//alert("Exam start!!");
			    	document.getElementById("startExam").disabled = false;
			    	tamp = "start now ";
			    } else if(seconds_left == 300 && document.forms[0].task.value == "doExam") {
			    	alert("You just have 5 minutes remaining!!");
			    } else if(seconds_left <= 0 &&
			    			(document.forms[0].task.value == "doExam"
				    		|| document.forms[0].task.value == "goto")) {
			    	//alert("Your exam finished!!")
					document.forms[0].task.value = "endExam";
					//alert("Exam selesai");
					document.forms[0].submit();
			    }else if(seconds_left > 0){
			    	// do some time calculations
			    	//alert("do");
			    	
				    days = parseInt(seconds_left / 86400);
				    seconds_left = seconds_left % 86400;
			     
				    hours = parseInt(seconds_left / 3600);
				    seconds_left = seconds_left % 3600;
			     
				    minutes = parseInt(seconds_left / 60);
				    seconds = parseInt(seconds_left % 60);
			     
				    // format countdown string + set tag value
				    if(document.forms[0].task.value == "exam") {
				    	tamp += days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
				    } else {
				    	 tamp += hours + "h, " + minutes + "m, " + seconds + "s";
				    }
				}
			    countdown.innerHTML = tamp;
			    //coba.innerHTML = document.forms[0].task.value;
			}, 1000);
	    }
	}
	
	function countDownForCandidate() {
		//alert("Candidate mau ujiaaannn.. :D");
		var startHour = "";
		
		// variables for time units
		var days, hours, minutes, seconds;
		var countdown;
		var tamp = "";
		
		//var coba;
		
		var current_date, target_date, seconds_left;
		//alert("Task : " + document.forms[0].task.value);
		
		if(document.forms[0].task.value != "exam") {			
			//coba = document.getElementById("coba");
			seconds_left = 0;
			
			//alert(document.forms[0].elements["listUjian.startHour"].value);
			startHour = document.forms[0].elements["listUjian.startHour"].value;
			var duration = 60000 * document.forms[0].elements["listUjian.duration"].value;

//				current_date = new Date(tamp_curr_date).getTime();
			//alert(startHour);
			current_date = new Date(startHour).getTime();
			target_date = 0 + current_date + duration;
			countdown = document.getElementById("countdownEnd");
			//countdown2 = document.getElementById("countdownEnd2");
			
//				seconds_left = (target_date - current_date) / 1000;
//				if(seconds_left < 0) {
//					coba.innerHTML = "Your exam has finished";
//				}
//				else {
//					coba.innerHTML = "";
//				}
				
			
			//alert(duration + " " +current_date + " " + target_date + " " + seconds_left);
			//alert(target_date);
			//alert(seconds_left);
			
			setInterval(function () {
	   		 	// find the amount of "seconds" between now and target
			    current_date = new Date().getTime();
			    seconds_left = 0 + (target_date - current_date) / 1000;
			    seconds_left = Math.round(seconds_left);
			    //alert(seconds_left);
			    
			    //coba.innerHTML = " " +current_date + " " + target_date + " ";
			    
			    tamp = "";
			  
			    // -- posisi masih countdown,, nunggu ujian mulai
			    if(seconds_left == 300 && document.forms[0].task.value == "doExam") {
			    	alert("You just have 5 minutes remaining!!");
			    } else if(seconds_left <= 0 && 
			    		(document.forms[0].task.value == "doExam"
			    		|| document.forms[0].task.value == "goto")) {
			    	//alert("Your exam finished!!")
					document.forms[0].task.value = "endExam";
					//alert("Exam selesai");
					document.forms[0].submit();
//				    } else if(document.forms[0].task.value == "endExam") {
//				    	document.forms[0].submit();	
			    } else if(seconds_left > 0){
			    	// do some time calculations
			    	//alert("do");
			    	
				    days = parseInt(seconds_left / 86400);
				    seconds_left = seconds_left % 86400;
			     
				    hours = parseInt(seconds_left / 3600);
				    seconds_left = seconds_left % 3600;
			     
				    minutes = parseInt(seconds_left / 60);
				    seconds = parseInt(seconds_left % 60);
			     
				    // format countdown string + set tag value
				    if(document.forms[0].task.value == "exam") {
				    	tamp = days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
				    } else {
				    	 tamp = hours + "h, " + minutes + "m, " + seconds + "s";
				    }
				    
				    //alert(tamp);
				}
			    countdown.innerHTML = tamp;
			    //countdown2.innerHTML = seconds_left;
			    //coba.innerHTML = document.forms[0].task.value;
			}, 1000);
		} else {
			document.getElementById("startExam").disabled = false;
			//alert(document.getElementById("startExam").disabled);
			
			if(document.forms[0].elements["listUjian.startHour"].value != "") {
				document.getElementById("startExam").value = "Continue Exam";
			}
		}
	}
</script>

</head>
<body>
	<center>
		<table width="1000px" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">Examination</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"><br>
					
					<!-- Insert Code Here -->
					<html:form action="/Exam" method="post">
						<html:hidden property="task" name="examForm" />
						<html:hidden property="doExam" name="examForm" />
						<html:hidden property="totalQuestion" name="examForm" />
						<html:hidden property="currentQuestion" name="examForm" />
						<html:hidden property="result" name="examForm" />
						<html:hidden property="examModel.no" name="examForm" />
						<html:hidden property="listUjian.batchClassId" name="examForm" />
						<html:hidden property="listUjian.examPrepId" name="examForm" />
						<html:hidden property="listUjian.startHour" name="examForm" />
						<html:hidden property="listUjian.endHour" name="examForm" />
						<html:hidden property="listUjian.duration" name="examForm" />
						
						<script type="text/javascript">
							
						
						</script>
						
						<logic:equal value="examResult" property="task" name="examForm">
								<center>
									<h2>Your exam has finished!</h2>
									<br/>
							<% if("trainee".equalsIgnoreCase(user.getRole())) {
							%>		
									<h2>RESULT : </h2>
									<br/>
									<h1><bean:write property="result" name="examForm"/></h1>
								
							<% } %>
									<script type="text/javascript">
										//alert("task : " + document.forms[0].task.value);
	 									document.forms[0].task.value = "";	
	 									//alert("task : " + document.forms[0].task.value);
									</script>	
								</center>
						</logic:equal>

						<logic:notEqual value="examResult" property="task" name="examForm">
							<% if("trainee".equalsIgnoreCase(user.getRole())) {
							%>	
							<logic:equal value="exam" property="task" name="examForm">
								<logic:empty property="listUjian.className" name="examForm">
									Belum ada ujian <div id="testCountDown"></div>
								</logic:empty>
								<logic:notEmpty property="listUjian.className" name="examForm">
									<h3>EXAM</h3>
									<br/><br/>
									<bean:write property="listUjian.className" name="examForm"/> <span id="countdownStart"></span>
									<br/><br/>
									<input type="button" value="Start Exam" onclick="flyToPage('doExam')" id="startExam" disabled>
								</logic:notEmpty>
							</logic:equal>
							
							
							<% } else if("candidate".equalsIgnoreCase(user.getRole())) {
							%>	
							<logic:equal value="exam" property="task" name="examForm">
								<logic:equal value="0" property="listUjian.examPrepId" name="examForm">
									Belum ada ujian
								</logic:equal>
								<logic:notEqual value="0" property="listUjian.examPrepId" name="examForm">
									<h3>Technical Test</h3>
									<input type="button" value="Start Exam" onclick="flyToPage('doExam')" id="startExam" disabled>
								</logic:notEqual>
							</logic:equal>
							
								
							<% }%>
							
							
							<logic:notEqual value="exam" property="task" name="examForm">
								<logic:empty property="examModel.question" name="examForm">
									ERROR!!!
									<br/>
									Please ask admin!
									<span id="coba"></span>
								</logic:empty>
								<logic:notEmpty property="examModel.question" name="examForm">
									<table align="center" width="600px" border="0">
										<tr>
<!-- 											<td colspan="10" align="right">Time Remaining : <span id="countdownEnd"></span></td> -->
											<td colspan="3" align="right">Time Remaining : <span id="countdownEnd"></span></td>
										</tr>
										<tr>
											<td colspan="3">&nbsp;</td>
										</tr>
										<tr>
											<td colspan="3" class="formListStyle">Question <bean:write property="currentQuestion" name="examForm"/> of <bean:write property="totalQuestion" name="examForm"/></td>
										</tr>
										<tr><td colspan="3">&nbsp;</td></tr>
										<tr>
											<td colspan="3" align="justify" style="line-height: 20px;" class="formListStyle"><bean:write property="examModel.question" name="examForm" filter="none"/></td>
										</tr>
										
			 							<logic:notEmpty property="optionOfAnswer" name="examForm">
			 								<logic:iterate name="examForm" id="id" property="optionOfAnswer">
												<tr>
													<td width="10px" class="formListStyle">
														<html:multibox property="answer">
															<bean:write name="id" property="value1" />
														</html:multibox>
													</td>
													<%-- &nbsp;<bean:write name="id" property="label1" filter="none"/>
													</td> --%>
													<td colspan="2" align="justify" style="line-height: 20px" class="formListStyle"><bean:write name="id" property="label1" filter="none"/></td>
												</tr>
											</logic:iterate>
										</logic:notEmpty> 
										
										<tr>
											<td colspan="3">&nbsp;</td>
										</tr>
										
										<tr>
											<td colspan="2" class="formListStyle">
												Unanswer Question : 
												<html:select property="noOfUnaswerQuestion" onchange="flyToQuestion('go')">
													<html:option value="">Select</html:option>
													<logic:notEmpty name="examForm" property="uanswerQuestion">
														<html:optionsCollection name="examForm" property="uanswerQuestion" label="no" value="no"/>
													</logic:notEmpty>
												</html:select>
											</td>
											<td style="vertical-align: middle;" colspan="1" align="right" width=50%>
												<input type="button" value="&lt;&lt;" id="first" onclick="flyToQuestion('first')" >&nbsp;
												<input type="button" value="&lt;" id="prev" onclick="flyToQuestion('prev')">&nbsp;
												<input type="button" value="&gt;" id="next" onclick="flyToQuestion('next')">&nbsp;
												<input type="button" value="&gt;&gt;" id="last" onclick="flyToQuestion('last')">&nbsp;
												<input type="text" class="textSmall" id="noOfQuestion">&nbsp;
												<input type="button" value="Go" onclick="flyToQuestion('')">
											</td>
										</tr>
										
										<tr>
											<td colspan="3">&nbsp;</td>
										</tr>
										<tr>
											<td colspan="3" align="right" class="formListStyle"><input type="button" value="End Exam" onclick="flyToPage('endExam')"></td>
										</tr>
										<tr>
											<td colspan="3">&nbsp;</td>
										</tr>
									</table>
								</logic:notEmpty>
								
							</logic:notEqual>
						
						</logic:notEqual>	
						
						
					</html:form>
					<br><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2013. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
	
	<script type="text/javascript">
		// ----------------------------------- countdown timer ------------------------------------
		if("<%= user.getRole() %>" == "trainee") {
			countDownForTrainee();

		} else if("<%= user.getRole() %>" == "candidate") {
			countDownForCandidate();
		}
		
		
		//countdown.innerHTML = "coba";
		
		
		// ------------------------------------------------------------------------------------------
	</script>	
</body>
</html>